<template>
    <div class="leave-application">
      <form @submit.prevent="submitForm">
        <LeaveTypePicker v-model="selectedLeaveType" />
        <hr>

        <TimePicker
          label="开始时间"
          :min-date="new Date()"
          @update="updateStartTime"
          ref="startPicker"
        />
        <hr>

        <TimePicker
          label="结束时间"
          :min-date="startDate"
          :min-hour="startTime.hours"
          :min-minute="startTime.minutes"
          @update="updateEndTime"
          ref="endPicker"
        />
        <div class="approval-wrapper">
          <h3 class="section-title">审批流程</h3>
          <ApprovalProcess :steps="approvalSteps" />
          </div>
        <button type="submit" class="submit-btn">提交申请</button>
      </form>
    </div>
  </template>

<script>
import TimePicker from './TimePicker.vue'
import LeaveTypePicker from './LeaveTypePicker.vue'
import ApprovalProcess from './ApprovalProcess.vue'
import { validateTimeSelection } from '../utils/dateUtils'

export default {
  components: {
    TimePicker,
    LeaveTypePicker,
    ApprovalProcess
  },
  data () {
    return {
      selectedLeaveType: null,
      startDate: null,
      startTime: { hours: 0, minutes: 0 },
      endDate: null,
      endTime: { hours: 0, minutes: 0 },
      approvalSteps: [
        { description: '发起' },
        { description: '抄送', person: '张三' },
        { description: 'GL审批', person: '富贵' },
        { description: '支部长审批', person: '吉祥' },
        { description: '部长审批', person: '如意' }
      ]
    }
  },
  methods: {
    updateStartTime ({ date, hours, minutes }) {
      this.startDate = date
      this.startTime = { hours, minutes }
      this.$refs.endPicker?.updateMinConstraints(date, hours, minutes)
    },
    updateEndTime ({ date, hours, minutes }) {
      this.endDate = date
      this.endTime = { hours, minutes }
    },
    submitForm () {
      if (!this.validateForm()) return
      // 提交逻辑
      console.log('Submit:', {
        leaveType: this.selectedLeaveType,
        start: this.getDateTimeString(this.startDate, this.startTime),
        end: this.getDateTimeString(this.endDate, this.endTime)
      })
    },
    validateForm () {
      if (!this.selectedLeaveType) {
        alert('请选择休假类型')
        return false
      }

      if (!this.startDate || !this.endDate) {
        alert('请选择完整的时间范围')
        return false
      }

      return validateTimeSelection(
        this.startDate,
        this.startTime,
        this.endDate,
        this.endTime
      )
    },
    getDateTimeString (date, time) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} 
                ${time.hours}:${time.minutes}`
    },
    handleUpdateConstraints ({ date, hours, minutes }) {
      // 更新父组件数据
      this.startDate = date
      this.startHour = hours
      this.startMinute = minutes
    }
  }
}
</script>

  <style scoped>
  .submit-btn {
    margin-top: 20px;
    padding: 12px 24px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    width: 100%;
  }

  .submit-btn:hover {
    background: #0056b3;
  }

  hr {
    margin: 20px 0;
    border: 1px solid #eee;
  }
  .approval-wrapper {
  margin: 20px 0;
  padding-left: 16px;  /* 缩小左侧间距 */
  border-left: none; /* 移除装饰线 */
}

.section-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  padding-left: 8px;  /* 保持标题对齐 */
  position: relative;
  left: 0;  /* 重置位置 */
}
  </style>
